<template>
	<view>
		<map 
			id="tencentMap" 
			:style="[...mapStyle]" 
			:show-compass="showCompass" 
			:enable-traffic="enableTraffic" 
			:longitude="longitude"
			:latitude="latitude" 
			:markers="markers" 
			:show-location="showLocation" 
			@markertap="markertap"
		></map>
	</view>
</template>


<script>
	export default {
		props: {
			mapStyle: {
				type: Object,
				default: {
					width: '100%',
					height: '600rpx'
				}
			},
			showCompass: { //	是否显示指南针
				type: Boolean,
				default: true
			},
			enableTraffic: { //	是否开启实时路况
				type: Boolean,
				default: false
			},
			showLocation: { //	是否显示带有方向的当前定位点
				type: Boolean,
				default: true
			},
		},
		data() {
			return {
				longitude: '118.72495',
				latitude: '32.00834',
				markers: [],
			}
		},
		onReady() {
			let vm = this
			vm.map = uni.createMapContext('tencentMap', this)
			vm.getLocation()
		},
		onReady() {
			//   wx请求获取位置权限
			this.getAuthorize().then(() => {
					//   同意后获取
				this.getLocationInfo();
			}).catch(() => {
				//   不同意给出弹框，再次确认
				this.openConfirm().then(() => {
					this.getLocationInfo();
				}).catch(() => {
					this.rejectGetLocation();
				});
			});
		},
		methods: {
			//   初次位置授权
			getAuthorize() {
				return new Promise((resolve, reject) => {
					uni.authorize({
						scope: "scope.userLocation",
						success: () => {
							resolve(); // 允许授权
						},
						fail: () => {
							reject(); // 拒绝授权
						},
					});
				});
			},
			// 确认授权后，获取用户位置
			getLocationInfo() {
				const that = this;
				uni.getLocation({
					type: "gcj02",
					success: function(res) {
						that.longitude = res.longitude; 
						that.latitude = res.latitude;
						that.markers = [
							{
								id:2,
								latitude:32.00834,
								longitude:118.72495,
								callout:{
									content:'奥林皮克体育中心',
									color:'#000',
									fontSize:10,
									bgColor:'#fff',
									padding:5,
									display:'ALWAYS',
									textAlign:'center'
								}
							},
						]
					},
					fail: function() {
						console.log('获取地址失败')
						uni.startLocationUpdate({
							type: 'gcj02', //gcj02  wgs84
							isHighAccuracy: true, //开启高精度定位(！！！必需)
							geocode: true,
							success: res => {
								uni.onLocationChange(function(res2) {
									console.log('实时纬度：' + res2.latitude);
									console.log('实时经度：' + res2.longitude);
									that.latitude = res2.latitude
									that.longitude = res2.longitude
									that.markers = [
										{
											id:2,
											latitude:32.00834,
											longitude:118.72495,
											callout:{
												content:'奥林皮克体育中心',
												color:'#000',
												fontSize:10,
												bgColor:'#fff',
												padding:5,
												display:'ALWAYS',
												textAlign:'center'
											}
										},
									]
					
								});
							},
							fail: err => {
								// clearInterval(this.ordertimer)
								console.error('开启小程序接收位置消息失败：', err)
							},
							complete: msg => {
								// clearInterval(this.ordertimer)
								console.log('调用开启小程序接收位置消息 API 完成')
							}
						});
					}
				});
			},
			// 拒绝授权后，弹框提示是否手动打开位置授权
			openConfirm() {
				return new Promise((resolve, reject) => {
					uni.showModal({
						title: "请求授权当前位置",
						content: "我们需要获取地理位置信息，为您推荐附近的商家",
						success: (res) => {
							if (res.confirm) {
								uni.openSetting().then((res) => {
									if (res[1].authSetting["scope.userLocation"] === true) {
										resolve(); // 打开地图权限设置
									} else {
										reject();
									}
								});
							} else if (res.cancel) {
								reject();
							}
						},
					});
				});
			},
			// 彻底拒绝位置获取
			rejectGetLocation() {
				uni.showToast({
					title: "您拒绝了授权，无法获得周边信息",
					icon: "none",
					duration: 2000,
				});
			},
			//	地图标点 点击事件
			markertap(e){
				let plugin = requirePlugin('routePlan');
				let key = '5ZKBZ-W3TCU-LSDVC-4XJLB-KQOYO-TVBQ6';  //	使用在腾讯位置服务申请的key
				let referer = 'test';   						  //	调用插件的app的名称
				let navigation = 1  							  //	值为1时，开启驾车导航功能；默认不开启此功能
				let endPoint = JSON.stringify({  				  //	终点
				  'name': '奥林皮克体育中心',
				  'latitude': 32.00834,
				  'longitude': 118.72495
				});
				wx.navigateTo({
				  url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint + '&navigation=' + navigation
				});
				
			}
		},
		
	}

</script>

<style>
</style>
